<template>
	<view class="page">
		<template v-if="loadingState.default">
			<loading :loadingState="loadingState"></loading>
		</template>
		<template v-else>
			<view class="body">
				<view class="goods-pic" :style="'height:'+swiperOption.screenWidth+'px'">
					<swiper class="swiper" :style="'height:'+swiperOption.screenWidth+'px'"
						:indicator-dots="swiperOption.indicatorDots" 
						:autoplay="swiperOption.autoplay" 
						:interval="swiperOption.interval" 
						:duration="swiperOption.duration"
						:circular="swiperOption.circular">
						<swiper-item v-for="(item,index) in detail.goods_images" :key="index">
							<image :src="item" mode="widthFix"></image>
						</swiper-item>						 
					</swiper>			
				</view>
				
				<view class="info-area">
					<view class="title">{{detail.goods_name}}</view>
					<view class="price"><i>￥</i><strong>{{detail.shop_price}}</strong></view>
					<view class="other-info">
						<span>市场价：<i class="old-price">{{detail.market_price}}</i></span>
						<span>销 量：{{detail.sales_sum}}</span>
						<span>库 存：{{detail.store_count}}</span>
					</view>
				</view>
				
				<view v-if="coupon.length>0" class="lay-btn-wrap m-b2" >
					<view class="lay-btn-item"> 
						<view class="content">
							<view class="label-name f-wb">优惠券</view>
							<view class="val">
								<view class="counp-list">
									<view class="item" v-for="(item,index) in coupon" :key="index">{{item.name}}</view> 
								</view> 
							</view>						
							<view class="right-icon"> 
								<view class="iconfont icon-jiantou_liebiaoxiangyou_o f-grey f-s68"></view>
							</view>
						</view>
					</view> 
				</view>
				
				<view class="lay-btn-wrap m-b2" >
					<view class="lay-btn-item"> 
						<view class="content">
							<view class="label-name f-wb">规格</view>
							<view class="val">
								<view class="specs">
									<strong>{{selectSpec.name}}</strong>
									<strong>{{selectSpec.num}}袋</strong> 
								</view>							
							</view>						
							<view class="right-icon"> 
								<view class="iconfont icon-jiantou_liebiaoxiangyou_o f-grey f-s68"></view>
							</view>
						</view>
					</view> 
				</view>
				
				<view class="lay-btn-wrap m-b2" >
					<view class="lay-btn-item"> 
						<view class="content">
							<view class="label-name f-wb">送 至</view>
							<view class="val">
								<view class="address">
									<view class="iconfont icon-daohang f-blue m-r1"></view>
									<text v-if="!true" class="f-grey">选择收货地址</text>
									<text v-else class="split">广东省广州市黄埔区科学大道绿地中央广场e座2605</text>
								</view> 
							</view>						
							<view class="right-icon"> 
								<view class="iconfont icon-jiantou_liebiaoxiangyou_o f-grey f-s68"></view>
							</view>
						</view>
					</view> 
					<view class="lay-btn-item">
						<view class="content">
							<view class="label-name f-wb">运 费</view>
							<view class="val"><view class="price">￥8</view></view>		 
						</view>
					</view> 
				</view>
				
				<view class="detail">
					<view class="hd-title">
						<view class="left-line"></view>
						<text>商品详情</text>
					</view>
					<image class="html_img" src="http://shop.honghuoyi.com/public/upload/goods/2021/07-19/7af67ff89131094185f76b8bf0e0d30c.jpg" mode="widthFix"></image>
					
				</view>
			</view>
			
			<view class="footer">
				<view class="fix-wrap detail-footer">
					<navigator url="/" open-type="navigate" hover-class="none" class="btn-type-1 home-btn">
						<view class="iconfont icon-31shouye f-s44"></view>
						<text>首页</text>
					</navigator>
					<view class="btn-type-1">					 
						<view class="iconfont icon-kefu f-s48"></view>
						<text>客服</text>
					</view> 
					<template>
						 <view class="btn-type-1">
							<view class="iconfont my-cart icon-caigou-xianxing f-s44"><i class="num">9</i></view>
							<text>购物车</text> 
						 </view> 
					</template>
					<!-- <template v-else>
						<view class="btn-type-1" @click="collect(detail.id)">
							<view class="iconfont f-s38 f-red">&#xe63d;</view>
							<text>收藏</text> 
						</view> 
					</template> -->
					<button open-type="contact" class="btn-type-2 kf-zx" > 
						<text>加入购物车</text>  
					</button>		
					<navigator url="/" hover-class="none" class="btn-type-2 tell-zx"> 
						<text>立即下单</text>
					</navigator> 
				</view>
			</view>
		</template>
		<!--  -->
		<view v-if="flag.isFullPage" class="full-fix-page">
			<template v-if="false"> 
				<view class="fix-bottom-wrap a-fadeinB">
					<view class="close-btn iconfont f-s38" @click="showPopup('hide')">&#xe624;</view>
					<view class="hd">
						<view class="t-m">选择收货地址</view>
					</view>
					<view class="popup-body">
						<view class="scroll-view">
							<view class="detail-wrap">
								<label class="check-item" v-for="(item,index) in 15" :key="index">
									<view class="address-item">
										<view class="text f-wb m-b1">科学大道绿地中央广场e座2605</view>
										<view class="area">广东省广州市黄埔区</view> 
									</view>									
									<view class="radio">
										<view v-if="!item.check" class="iconfont f-s50 f-grey">&#xe6a6;</view>
										<view v-else class="iconfont f-s50">&#xe604;</view>
									</view>
									<!-- <radio class="radio" value="" :checked="item.check" color="#f00" /> -->
								</label>										 
							</view>
						</view>
						<view class="bottom">
							<view class="fix-wrap btn-wrap">
								<navigator open-type="navigate" url="/" hover-class="none" class="item-horizontal flex-grow-1 blue">
									<view class="name">管理收货地址</view>
								</navigator> 
								<view class="item-horizontal flex-grow-1 red">
									<view class="name">确定</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>	
			
			<template>
				<view class="spec-wrap">
					<view class="close-btn iconfont f-s38" @click="showPopup('hide')">&#xe624;</view>
					<view class="goods-info">
						<view class="pic">
							<image src="http://shop.honghuoyi.com/public/upload/goods/2021/09-28/4e186f0441a2db41366ec3fa3c84d59d.jpg" mode="widthFix"></image>
						</view>
						<view class="info">
							<view class="title split-line">{{detail.goods_name}}</view>
							<view class="price">￥12.00</view>
							<view class="store">库存：1000</view>
						</view>
					</view>
					<view class="goods-spec" v-for="(item,index) in detail.spec" :key="index">
						<view class="label">{{item.spec_name}}</view>
						<view class="spec-list">
							<view :class="['item',{'active':subitem.item_id==specInfo.item_id}]" v-for="(subitem,subindex) in item.spec_value" :key="subindex">
								<view @click="changeSpec(subitem.item_id)">{{subitem.item}}</view>								
							</view> 
						</view>
					</view>
					<view class="goods-spec">
						<view class="label">购买数量</view>
						<view class="spec-num-ctrl">
							<view class="btn cut">-</view>
							<input type="number">
							<view class="btn add">+</view>
						</view>
					</view>
					<view class="btn-wrap">
						<view class="btn add-card">加入购物车</view>	
						<view class="btn buy-now">立即购买</view>	
					</view>
				</view>
			</template>				
							
		</view>
	
	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import {img_path} from '@/config.js'
	import {previewImage} from '@/common/util.js'
	import {getSystemInfo} from '@/common/promise.js'
	export default {
		name: 'demo',
		data() {
			return { 
				userInfo:uni.getStorageSync('userInfo'),
				loadingState: {
					default: true,
				},
				id:'',
				flag:{
					isFullPage:false
				},
				detail: {},
				specInfo:{},
				selectSpec:{
					name:'',
					num:1
				},
				coupon:[],
				img_path:img_path, 
				isStop:true,
				swiperOption:{
					indicatorDots: true,
					autoplay: true,
					interval: 2000,
					duration: 500,
					circular:true,
					screenWidth:0
				}
			}
		},
		onShow() {

		},
		async onLoad(params) { 
			this.id=params.id;
			this.setSlidePicHeight(); 
			this.getGoodsInfo();
			this.goodsCoupon();
		},
		methods: {
			
			// 获取终端系统信息
			setSlidePicHeight:async function(){ 
				let res=await getSystemInfo();
				this.swiperOption.screenWidth=res.screenWidth; 
			},  
			
			// 获取商品详情
			getGoodsInfo:async function(){
				let res=await this.$api.shop_api.goodsInfo({
					goods_id:this.id
				})
				console.log(res)
				if(res.data){
					this.loadingState.default=false;
					this.detail=res.data;
					this.specInfo={ 
						item_id:'',
						shop_price: res.data.shop_price,
						market_price: res.data.market_price,
						sales_sum:res.data.sales_sum,
						store_count:res.data.store_count,
						spec:res.data.spec
					}
					this.selectSpec.name=res.data.spec[0].spec_value[0].item;
					
				}
			},
			
			// 获取商品规格信息
			goodsSpecInfo:async function(){
				let res=await this.$api.shop_api.goodsSpecInfo({
					goods_id:this.id,
					key:this.specInfo.item_id
				})
				console.log(res)
				if(res.data.rcode==1){
					this.specInfo.item_id=res.data.rdata.item_id;
					this.specInfo.shop_price=res.data.rdata.shop_price;
					this.specInfo.market_price=res.data.rdata.market_price;
					this.specInfo.sales_sum=res.data.rdata.sales_sum;
					this.specInfo.store_count=res.data.rdata.store_count;
				}
			},
			
			changeSpec:function(id){  
				this.specInfo.key_id=id;
				this.goodsSpecInfo();
			},
			
			// 获取优惠券
			goodsCoupon:async function(){
				let res=await this.$api.shop_api.goodsCoupon({
					goods_id:this.id
				});
				console.log(res)
				if(res.data.rcode==1){
					this.coupon=res.data.rdata;
				}
			},
			
			// 打开弹窗
			showPopup:function(t,n){
				if(t=='show'){
					this.flag.isFullPage=true;
					this.flag[n]=true;
				}else if(t=='hide'){
					for(let i in this.flag){
						this.flag[i]=false;
					}
				}
			},
		},
		computed: {
			 
		},
		watch:{
			 
		},
		components: {
			loading
		}
	}
</script>

<style lang="less" scoped>
	.goods-pic{
		image{
			width: 100%;
		}
	} 
	.info-area{
		padding:20rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		.title{
			margin-bottom: 20rpx;
			font-size: 32rpx;
		}
		.price{
			margin-bottom: 20rpx;
			font-size: 28rpx;
			strong{
				font-size: 36rpx;
			}
		}
		.other-info{
			display: flex;
			justify-content: space-between;
			color:#999;
			font-size: 26rpx;
		}
	}
	
	.counp-list{
		display: flex;
		.item{
			margin-right: 20rpx;
			border:1rpx solid #f00;
			border-radius: 5rpx;
			color:#f00;
		}
	}
	
	.address-item{
		.area{
			font-size: 26rpx;
		}
	}
	
	.spec-wrap{
		position: fixed;
		left:0;
		bottom:0;
		z-index: 100;
		width:100%;
		height:680rpx;
		background: #fff;
		.close-btn{
			position: absolute;
			right:10rpx;
			top:10rpx;
		}
		.goods-info{
			display: flex;
			margin: 20rpx 20rpx 50rpx;
			.pic{
				flex-shrink: 0;
				width: 180rpx;
				margin:0 20rpx 0 0;
				border:1rpx solid #eee;
				border-radius: 10rpx;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
			.info{
				width: 60%;
				.title{
					margin-bottom: 10rpx;
					font-size: 30rpx;
				}
				.price{
					font-size: 32rpx;
				}
				.store{
					font-size: 28rpx;
					color:#999;
				}
			}
		}
		.goods-spec{
			margin: 20rpx 20rpx 50rpx;
			.label{
				margin-bottom: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
			.spec-list{
				display: flex;
				.item{
					padding:10rpx 20rpx;
					margin-right: 20rpx;
					border-radius: 36rpx;
					background: #efefef;
					color:#333;
					font-size: 28rpx;
				}
				.active{
					background: #ffefef;
					border-color: #f23030;
					color:#ff3a3a;
				}
			}
			.spec-num-ctrl{
				display: flex;
				.btn{
					width: 50rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					background: #ccc;
					font-size: 30rpx;
				}
				input{
					width: 100rpx; 
					height: 49rpx;
					text-align: center;
					border: 1rpx solid #eee;
					font-size: 30rpx;
				}
				.add{
					color:#f00;
				}
			}
		}
		.btn-wrap{
			display: flex;
			justify-content: space-between;
			margin: 20rpx;
			.btn{
				width: 48%;
				text-align: center;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 36rpx;
				font-size: 30rpx;
				color:#fff;
			}
			.add-card{
				background: #ffb03f;
			}
			.buy-now{
				background: #fb4242;
			}
		}
	}
	
	.lay-btn-item{	
		padding:20rpx 0;
		.specs{
			strong{
				margin-right: 20rpx;
				color:#333;
			}
		}
		.address{
			display: flex;  
			align-items: center;
			color:#333;
			text{
				max-width: 70%; 
			}
		}
	}
	
	
	.detail{
		.hd-title{
			display: flex;
			align-items: center;
			padding:30rpx 0 30rpx 20rpx;
			background: #fff;
			font-size: 32rpx;
			font-weight: bold;	
			.left-line{
				width: 10rpx;
				height: 36rpx;
				margin-right: 20rpx;
				background: #f00;
				border-radius: 5rpx;
			}
			text{
				
			}
		}
		// ::v-deep .html_p{
		// 	line-height: 54rpx;
		// 	text-align: left!important;
		// 	margin-bottom: 20rpx;
		// 	text-indent: 2em;
		// 	font-size: 32rpx; 
		// }
		// ::v-deep .html_img{
		// 	width: 100%!important;
		// 	height: auto!important;
		// 	margin:20rpx 0 20rpx -2em;
			
		// }
	}
	
	.detail-footer{
		width:100%;
		max-width: 750rpx;
		margin:0 auto; 
		display: flex;
		.iconfont{
			width:50rpx;
			height:50rpx;
			text-align: center;
			line-height: 50rpx;
		}
		.btn-type-1{
			width:15%;
			text-align: center;
			text{
				display: block;
				color:#666;
				font-size:24rpx;
			}
			.iconfont{
				display: block;	
				margin:5px auto 0;
				color:#666;
			}
		}
		.btn-type-2{
			width:35%;  
			display: flex;
			justify-content: center;
			align-items: center;
			text{
				display: inline-block;
				line-height: 48rpx;
				font-size: 30rpx; 
			}
			.iconfont{
				display: inline-block;
			} 
		}
		.tell-zx{
			background:#f00;
			color:#fff;
		}
		.kf-zx{
			background:#ff9600; 
			color:#fff;
		}
		.cancle{
			background:#ccc;
			color:#fff;
		}
		.my-cart{
			position: relative;
			.num{
				position: absolute;
				right:-16rpx;
				top:-8rpx;
				min-width: 32rpx;
				height: 32rpx;
				text-align: center;
				line-height: 32rpx;
				background: #f00;
				border-radius: 36rpx;
				color:#fff;
				font-size: 26rpx;
			}
		}
	}
</style>
